<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

		<title>某某产品</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />

		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/product.css" />
	</head>

	<body class="bgcolor12">
		<div class="contbox">
			<div class="mui-content">
				<!--logo部分-->
				<div onclick="javascript:window.location.href='index1.html'" class="mui-row">
					<div class="mui-col-xs-12 logobox11 clearfix">
						<img src="img/logo_04.png" /><span>健维商城</span>
					</div>
				</div>
				<!--logo部分-->

				<!--基本信息 产品详情切换-->
				<div id="shou_j_xuank2" class="mui-row mui-bar mui-bar-nav qihuanbox" style="background: #fff;border-bottom: 1px solid #eee;height: 65px;top: 52px;">
					<div class="mui-col-xs-12">
						<div id="btnslistdd" class="btnslist clearfix">
							<div class="btnslist1">基本信息</div>
							<div>产品详情</div>
						</div>
					</div>
				</div>
				<!--基本信息 产品详情切换-->
				<!--占位置高度-->
				<div style="height: 65px;"></div>
				<!--占位置高度-->
				<!--基本信息内容-->
				<div style="display: block;" class="btns111">
					<!--轮播图部分-->
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<div id="slider" class="mui-slider">
								<div class="mui-slider-group mui-slider-loop">
									<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="img/23_02.png">
										</a>
									</div>
									<!-- 第一张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/23_02.png">
										</a>
									</div>
									<!-- 第二张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/23_02.png">
										</a>
									</div>
									<!-- 第三张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/23_02.png">
										</a>
									</div>
									<!-- 第四张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/23_02.png">
										</a>
									</div>
									<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="img/23_02.png">
										</a>
									</div>
								</div>
								<div class="mui-slider-indicator">
									<div class="mui-indicator mui-active"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
								</div>
							</div>
						</div>
					</div>
					<!--轮播图部分-->
					<!--某某产品名称/参数部分-->
					<div class="mui-row">
						<div class="mui-col-xs-12 canshubox">
							<h6>某某产品名称/参数</h6>
							<div class="canshubox1 clearfix">
								<span><del>¥336</del></span>
								<span><b style="font-size: 16px;">¥</b>136</span>
								<span>货源充足</span>
							</div>
						</div>
					</div>
					<!--某某产品名称/参数部分-->
					<!--产品详情图片说明部分-->
					<div class="mui-row">
						<div class="mui-col-xs-12 picexq">
							<h5>产品详情</h5>
							<div class="picexq1">
								<!--<br/><br/><br/>
							此区域为图文详情-->
								<img src="img/568a3ff5f2fce_1024.jpg" />
							</div>
						</div>
					</div>
					<!--产品详情图片说明部分-->
				</div>
				<!--基本信息内容-->
				<!--产品详情内容-->
				<div class="btns111">
					<!--产品详情图片说明部分-->
					<div class="mui-row">
						<div class="mui-col-xs-12 picexq">

							<div class="picexq1">
								<!--<br/><br/><br/>
							此区域为图文详情-->
								<img src="img/568a3ff5f2fce_1024.jpg" />
							</div>
						</div>
					</div>
					<!--产品详情图片说明部分-->
				</div>
				<!--产品详情内容-->

				<!--占位置高度-->
				<div style="height: 135px;"></div>
				<!--占位置高度-->
				<!--底部nav部分-->
				<div class="navshangpinlist">
					<div class="stopke">
						<img src="img/rr3png_04.png" />
						<div class="navshangpinlist1">当前人数：<span>10000</span></div>
						<!--倒计时-->
						<span id="spantrdd"></span>
					</div>
					<!--进度条-->
					<div class="jindu-box">
						<div class="lanren">
							<div class="left"></div>
							<div class="right"></div>
							<div id="centent"></div>
							<div id="bar"></div>
						</div>
					</div>
					<!--进度条-->
					<div class="xiangmuxq clearfix">
						<a href="index1.html" class="xiangmuxq1">
							<span style="font-size: 23px;position: absolute;top: 8px;" class="mui-icon iconfont">&#xe624;</span>
							<img class="imgw2" src="img/86_03.png" />
							<span class="mui-tab-label" style="color: #929292;">商城首页</span>
						</a>
						<div id="confirmBtn" class="xiangmuxq2">立即下单</div>
					</div>
				</div>
				<!--底部nav部分-->
			</div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			//mui初始化
			
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；  
			});
			
			//倒计时
			function weishu(num) {
				if(num < 10) {
					return "0" + num;
				}
				return num;
			}
			var interval = 1000;

			function ShowCountDown(year, month, day, divname) {
				var now = new Date();
				var endDate = new Date(year, month - 1, day);
				var leftTime = endDate.getTime() - now.getTime();
				var leftsecond = parseInt(leftTime / 1000);
				var day1 = parseInt(leftsecond / (24 * 60 * 60 * 6));
				var day1 = Math.floor(leftsecond / (60 * 60 * 24));
				var hour = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
				var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour * 3600) / 60);
				var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour * 3600 - minute * 60);
				var cc = document.getElementById(divname);
				cc.innerHTML = "00天" + "12时" + weishu(minute) + "分" + weishu(second) + "秒";
			}
			setInterval(function() { ShowCountDown(2017, 3, 22, 'spantrdd'); }, interval);
			
			//进度条
			var disp = document.getElementById("bar"); //进度条
			var centent = document.getElementById("centent"); //移动的圆

			disp.style.width = "85%"; //进度条的移动
			centent.style.left = disp.style.width; //移动的距离
			centent.innerHTML = disp.style.width; //移动的圆显示的进度比例
			//确认立即下单
			document.getElementById("confirmBtn").addEventListener('tap', function() {
				var btnArray = ['取消', '确定'];
				mui.confirm('你将购买某某' + '<br/>' + '产品价格：500元', '确认订单', btnArray, function(e) {
					if(e.index == 1) {
						//						'确认订单';
					} else {
						//						'你取消了订单'
					}
				})
			});
			
			//产品详情切换
			var scrollbox = document.getElementById("btnslistdd");
			var odiv = scrollbox.getElementsByTagName("div");
			var shoplist1 = document.getElementsByClassName("btns111");

			for(var a = 0; a < odiv.length; a++) {
				odiv[a].index = a;
				odiv[a].onclick = function() {
					for(var b = 0; b < shoplist1.length; b++) {
						odiv[b].className = '';
						shoplist1[b].style.display = 'none';
					}
					this.className = 'btnslist1';
					shoplist1[this.index].style.display = "block";

				}
			};
			
			//固定产品详情切换
			//		  alert($)
			var $window = $(window);
			var $backTopq = $('#shou_j_xuank2');
			$window.on('scroll', function() {
				var $this = $(this);
				var $scroll = $(this).scrollTop();

				if($scroll > 3) {

					$backTopq.css('top', '0px');
				} else if($scroll < 100) {

					$backTopq.css('top', '52px');
				}
			});
		</script>
	</body>

</html>